<template>
<div id="xk">
  
    
    <nav class="navbar ms-navbar">
      <div class="ms-aside-toggler ms-toggler pl-0" data-target="#ms-side-nav" data-toggle="slideLeft">
        <span class="ms-toggler-bar bg-white"></span>
        <span class="ms-toggler-bar bg-white"></span>
        <span class="ms-toggler-bar bg-white"></span>
      </div>
      <div class="logo-sn logo-sm ms-d-block-sm">
        <a class="pl-0 ml-0 text-center navbar-brand mr-0" href="index.html"><img
            src="assets/img/mednalytics-logo-84x41.png" alt="logo"> </a>
      </div>
      <ul class="ms-nav-list ms-inline mb-0" id="ms-nav-options">

        <li class="ms-nav-item  ms-d-none">
          <a href="#mymodal" class="text-white" data-toggle="modal"><i class="flaticon-spreadsheet mr-2"></i> 查看日程</a>
        </li>

        <li class="ms-nav-item ms-d-none">
          <a href="#prescription" class="text-white" data-toggle="modal"><i class="flaticon-pencil mr-2"></i> 制定计划</a>
        </li>

        <li class="ms-nav-item ms-d-none">
          <a href="#report1" class="text-white" data-toggle="modal"><i class="flaticon-list mr-2"></i> </a>
        </li>

        <li class="ms-nav-item dropdown">
          <a href="#" class="text-disabled ms-has-notification" id="notificationDropdown" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false"><i class="flaticon-bell"></i></a>
          <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="notificationDropdown">
            <li class="dropdown-menu-header">
              <h6 class="dropdown-header ms-inline m-0"><span class="text-disabled">Notifications</span></h6>
              <span class="badge badge-pill badge-info">4 New</span>
            </li>
            <li class="dropdown-divider"></li>
            <li class="ms-scrollable ms-dropdown-list">
              <a class="media p-2" href="#">
                <div class="media-body">
                  <span>12 ways to improve your crypto dashboard</span>
                  <p class="fs-10 my-1 text-disabled"><i class="material-icons">access_time</i> 30 seconds ago</p>
                </div>
              </a>
              <a class="media p-2" href="#">
                <div class="media-body">
                  <span>You have newly registered users</span>
                  <p class="fs-10 my-1 text-disabled"><i class="material-icons">access_time</i> 45 minutes ago</p>
                </div>
              </a>
              <a class="media p-2" href="#">
                <div class="media-body">
                  <span>Your account was logged in from an unauthorized IP</span>
                  <p class="fs-10 my-1 text-disabled"><i class="material-icons">access_time</i> 2 hours ago</p>
                </div>
              </a>
              <a class="media p-2" href="#">
                <div class="media-body">
                  <span>An application form has been submitted</span>
                  <p class="fs-10 my-1 text-disabled"><i class="material-icons">access_time</i> 1 day ago</p>
                </div>
              </a>
            </li>
            <li class="dropdown-divider"></li>
            <li class="dropdown-menu-footer text-center">
              <a href="#">View all Notifications</a>
            </li>
          </ul>
        </li>
        <li class="ms-nav-item ms-nav-user dropdown">
          <a href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <img
              class="ms-user-img ms-img-round float-right" src="assets/img/dashboard/doctor-3.jpg" alt="people"> </a>
          <ul class="dropdown-menu dropdown-menu-right user-dropdown" aria-labelledby="userDropdown">
            <li class="dropdown-menu-header">
              <h6 class="dropdown-header ms-inline m-0"><span class="text-disabled">Welcome, Dr Samuel Deo</span></h6>
            </li>
            <li class="dropdown-divider"></li>
            <li class="ms-dropdown-list">
              <a class="media fs-14 p-2" href="pages/prebuilt-pages/user-profile.html"> <span><i
                    class="flaticon-user mr-2"></i> Profile</span> </a>
              <a class="media fs-14 p-2" href="pages/apps/email.html"> <span><i class="flaticon-mail mr-2"></i>
                  Inbox</span> <span class="badge badge-pill badge-info">3</span> </a>
              <a class="media fs-14 p-2" href="pages/prebuilt-pages/user-profile.html"> <span><i
                    class="flaticon-gear mr-2"></i> Account Settings</span> </a>
            </li>
            <li class="dropdown-divider"></li>
            <li class="dropdown-menu-footer">
              <a class="media fs-14 p-2" href="pages/prebuilt-pages/lock-screen.html"> <span><i
                    class="flaticon-security mr-2"></i> Lock</span> </a>
            </li>
            <li class="dropdown-menu-footer">
              <a class="media fs-14 p-2" href="pages/prebuilt-pages/default-login.html"> <span><i
                    class="flaticon-shut-down mr-2"></i> Logout</span> </a>
            </li>
          </ul>
        </li>
      </ul>
      <div class="ms-toggler ms-d-block-sm pr-0 ms-nav-toggler" data-toggle="slideDown" data-target="#ms-nav-options">
        <span class="ms-toggler-bar bg-white"></span>
        <span class="ms-toggler-bar bg-white"></span>
        <span class="ms-toggler-bar bg-white"></span>
      </div>
    </nav>



    <div class="ms-content-wrapper">

    </div> 


    <div  class="comer"  v-for="(good,gname) in goods" :key="good"  >

        <div class="col-lg-4 col-md-4 col-sm-6" style="width:460px" v-if="good">
          <div class="ms-card" style="width:300px">
            <div class="ms-card-body">
              <div class="media fs-14">


                <div class="mr-2 align-self-center">
                  <img :src="good.where" class="ms-img-round" alt="people">
                </div>



                <div class="media-body">
                  <h6>{{good['n']}}</h6>
                  <div class="dropdown float-right">
                    <a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <i class="material-icons">more_vert</i>
                    </a>

                    <ul class="dropdown-menu dropdown-menu-right">
                      <li class="ms-dropdown-list">
                        <a class="media p-2" href="#">
                          <div class="media-body">
                            <span @click="large(good.where)">View Details</span>
                          </div>
                        </a>
                        <!-- <a class="media p-2" href="#">
                          <div class="media-body">  
                            <span>Assign</span>
                          </div>
                        </a> -->
                        <!-- <a class="media p-2" href="#">
                          <div class="media-body">
                            <span @click="aaa">add</span>
                          </div>
                        </a> -->
                        <a class="media p-2">
                          <div class="media-body">
                            <span @click="d(gname)">Delete</span>
                          </div>
                        </a>
                        
                      </li>
                    </ul>



                  </div>
                  <p class="fs-12 my-1 text-disabled">{{good['praise']}}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>
<div style="position:relative"><div id="detail" v-if="select"></div></div>
</div>
</template>
<script>


module.exports = {
  data( ){
    
    
    var goods={
            good1:{
                where:"img/1.jpeg",
                'n':'abcd',
                'praise':100
            },
            good2:{
                where:"img/2.jpeg",
                'n':'abcd',
                'praise':100
            },
            good3:{
                where:"img/3.jpeg",
                'n':'abcd',
                'praise':100
            },
            good4:{
                where:"img/4.jpeg",
                'n':'abcd',
                'praise':100
            },
            good5:{
                where:"img/5.jpeg",
                'n':'abcd',
                'praise':100
            },
        }
        let g=localStorage.getItem("goods")
        if(g!=null){
          g=JSON.parse(g)
          goods=g
        }
          localStorage.setItem('goods',JSON.stringify(goods))
    return {
      select:false,
      goods:goods
        }

  },
  methods: {
      large(a){
        this.select=!this.select
        setTimeout(() => {
          this.select=!this.select
        },3000)
        setTimeout(() => {
          let detail=document.querySelector('#detail');
          console.log(detail, a);
          detail.style.color=`red`;
          detail.style.backgroundImage=`url('${a}')`;
        }, 10);
      },
      d(k){
        console.log(k);
        delete this.goods[k];
        localStorage.setItem('goods',JSON.stringify(this.goods))
        console.log(this.goods);
        this.$forceUpdate();
      },
      aaa(){
        let xukedev=this.goods
        xukedev=JSON.stringify(xukedev)
        localStorage.setItem('goods',xukedev)
      },
  },
};
</script>
<style scoped>
    #xk{
        display: flex;
        justify-content: flex-start;
        position: relative;
    }
    img{
        border-radius: 0%;
    }
    .comer{
        display: inline-block;
        width: 30%;
    }
    .ms-card-body{
        width: 100%;
    }
    .col-lg-4{
        width: 100%;
    }
    .detail {
      background-color: aquamarine;
      width: 500px;
      height: 500px;
      position:absolute;
    }
    .media-body>span{
      width: 100%;
      height: 100%;
      display: inline-block;
    }
    #detail{
      width: 300px;
      height: 300px;
      background-repeat: no-repeat;
      background-size: cover;
      position: absolute;
      left: 20%;
      top: 20%;
    }
</style>